<template>
  <div class="regBJ">
    <div style="width: 500px;background-color: rgba(255,255,255,0.3);  margin: 20px auto; padding: 30px 60px;">
      <h1 style="text-align: center; margin: 20px 0;">用户注册</h1>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="ruleForm.confirmPassword"  placeholder="请确认密码" type="password" />
        </el-form-item>
        <el-form-item label="真实姓名" prop="real_name">
          <el-input v-model="ruleForm.real_name"></el-input>
          <span style="color: crimson;font-size: 4px">*请填写个人真实姓名,防止后期申报有误 ! ! !</span>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="code"placeholder="请输入验证码" class="code" id="code" ></el-input>
          <div class="login-code" @click="refreshCode">
            <!--验证码组件-->
            <s-identify :identifyCode="identifyCode"></s-identify>
          </div>
        </el-form-item>
        <el-form-item label="地区">
          <el-select style="height: 32px; width: 85%;"  v-model="ruleForm.locationId">
            <el-option
                v-for="item1 in options"
                :key="item1.id"
                :label="item1.name"
                :value="item1.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>
<style>
 body {
   background-image: url("/src/assets/regbj.jpeg");
   background-size: cover;
   overflow: hidden;
 }

 /*验证码样式*/
 .code{
    width:124px !important;
    height:31px;

 }
 .login-code{
   cursor: pointer;
   float:right;
 }
</style>
<script>
import SIdentify from './sidentify'
export default {
  name:'enlist',
  components:{SIdentify},
  data() {
    //确认两次输入密码一致
    const equalToPassword = (rule, value, callback) => {
      if (this.ruleForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      identifyCodes:"1234567890",
      identifyCode:"",
      code:"",//用户输入的验证码
      ruleForm: {},
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min:1, max: 12, message: '用户名长度不得多于12位', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 12, message: '建议密码长度在6~12之间', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入正确的手机号码', trigger: 'blur'},
          {min: 8, max: 13, message: '手机号码长度应在 8 到 13 之间,请仔细检查', trigger: 'blur'}
        ],
        confirmPassword: [
          { required: true, message: '请您再次确认密码', trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ],
        real_name: [
          {required: true, message: '请填写真实姓名', trigger: 'blur',min:2, max: 5},
        ],
        locationId: [
          {required: true, message: '请填写地址', trigger: 'blur'},
        ],
      },
      options: []
    };
  },
  methods: {
    //地区加载
    selectRegion(){
      let url='http://localhost:8080/users/select/region';
      this.axios.get(url).then((response)=>{
      this.options=response.data.data;
      })

    },
    submitForm(formName) {
      if(this.code==""){
        alert("请输入验证码");
        return;
      }
      if(this.identifyCode!==this.code){
        this.code='';
        this.refreshCode();
        alert("请输入正确的验证码");
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          let url = 'http://localhost:8080/users/add-new';
          let formData = this.qs.stringify(this.ruleForm);
          this.axios.post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.$message({
                message: '注册成功！',
                type: 'success'
              });
              this.$router.push('/login');
            } else {
              this.$message.error(responseBody.message);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //验证码
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
     },
    refreshCode() {
     this.identifyCode = "";
       this.makeCode(this.identifyCodes, 4);
       },
      makeCode(o, l) {
       for (let i = 0; i < l; i++) {
          this.identifyCode += this.identifyCodes[
             this.randomNum(0, this.identifyCodes.length)];
          }
             console.log(this.identifyCode);
        },

  },
  mounted() {
    /*// 调用setCookie方法，同时传递需要存储的数据，保存天数
    this.cookie.setCookie()*/
    this.identifyCode="";
    this.makeCode(this.identifyCodes,4);
    this.selectRegion();
  },
  created() {
    //初始化验证码
    this.refreshCode()
  }
}
</script>